<template>
  <view class="container">
    <view class="tips">
      <view>操作说明：</view>
      <view>1、列表展示待付款的所有费项，可选择多个费用合并确认流水</view>
      <view>2、线上费用同线下费用不支持合并确认，选择时请注意</view>
    </view>
    <view class="list-cont">
      <ve-card
        :title="item.feeName"
        type="none"
        :fold="false"
        v-for="(item, index) in fee.orderFeeList"
        :key="index"
        @click="chooseFee(index)"
      >
        <template #status>
          <view class="status-2">{{ item.feeTypeName }}</view>
          <view class="status-3">{{ item.costTypeName }}</view>
        </template>
        <template #extra>
          <image class="icon-choose" v-if="!item.choose" src="../../../../static/icons/icon-checkbox.png"></image>
          <image class="icon-choose" v-else src="../../../../static/icons/icon-checkbox-select.png" />
        </template>
        <ve-cell-price label="费用金额" :value="item.totalAmount"></ve-cell-price>
        <ve-cell label="生成节点" priceAlign="right">{{ item.createNodeName }}</ve-cell>
        <ve-cell label="生成时间" priceAlign="right">{{ item.createTime }}</ve-cell>
      </ve-card>
      <ve-empty v-if="fee.orderFeeList.length == 0"></ve-empty>
    </view>
    <!-- 底部 -->
    <ve-bottom-box>
      <view class="bottom-button" @click="allChange">
        <image class="all-choose" v-if="allChoose" src="../../../../static/icons/icon-checkbox-select.png" />
        <image class="all-choose" v-else src="../../../../static/icons/icon-checkbox.png"></image>
        <view class="c3 fs28 fw400 all-choose-text">全选</view>
      </view>
      <ve-button type="primary" @click="nextFn" :loading="loading" size="long">合并确认</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getOrdrFeeDetailAPI } from '@/api/order/lOrder'
  import { checkManyToConfirmLOrder } from '@/api/asset/asset-fee'

  const fee = ref({
    orderFeeList: [],
  })
  const allChoose = ref(false)
  const idList = ref([])
  const getDetail = async (id) => {
    const res = await getOrdrFeeDetailAPI({ id: id, mergeFlag: 1 })
    var feedata = res.result
    if (feedata.orderFeeList && feedata.orderFeeList.length > 0) {
      feedata.orderFeeList.forEach((item) => {
        item.choose = false
      })
    }
    fee.value = feedata
  }
  const chooseFee = (i) => {
    fee.value.orderFeeList.forEach((item, index) => {
      if (i == index) {
        item.choose = !item.choose
        if (item.choose) {
          idList.value.push(item.id)
        } else {
          idList.value = idList.value.filter((el) => el !== item.id)
        }
      }
    })
    if (idList.value.length == fee.value.orderFeeList.length) {
      allChoose.value = true
    } else {
      allChoose.value = false
    }
  }
  const allChange = () => {
    allChoose.value = !allChoose.value
    if (allChoose.value) {
      idList.value = []
      fee.value.orderFeeList.forEach((item, index) => {
        item.choose = true
        idList.value.push(item.id)
      })
    } else {
      idList.value = []
      fee.value.orderFeeList.forEach((item, index) => {
        item.choose = false
      })
    }
  }

  const loading = ref(false)
  const nextFn = () => {
    if (idList.value.length == 0) {
      uni.showToast({
        icon: 'none',
        title: '请选择费项',
      })
      return false
    } else {
      loading.value = true
      checkManyToConfirmLOrder({ idList: idList.value })
        .then((res) => {
          console.log(res)
          loading.value = false
          if (res.code == 200) {
            uni.navigateTo({
              url: '/pages/order/long-order/detail/confirmExpenses?idList=' + JSON.stringify(idList.value) + '&pagefrom=mergeConfirm',
            })
          } else {
            uni.showModal({
              title: '提示',
              content: res.message,
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                }
              },
            })
          }
        })
        .catch((error) => {
          loading.value = false
        })
    }
  }
  onLoad((options) => {
    idList.value = []
    if (options.orderId) {
      getDetail(options.orderId)
    }
  })
</script>

<style lang="scss" scoped>
  .tips {
    width: 100%;
    background: #e8f3ff;
    padding: 18rpx 32rpx;
    color: #1d2129;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 2;
  }

  .list-cont {
    padding: 24rpx;
  }
  .status-2 {
    background: #e8f7ff;
    color: #3491fa;
    border: 2rpx solid #3491fa;
    border-radius: 450rpx;
    padding: 0 16rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    margin-right: 10rpx;
    margin-left: 10rpx;
  }
  .status-3 {
    background: #fff7e8;
    color: #ff7d00;
    border: 2rpx solid #ff7d00;
    border-radius: 450rpx;
    padding: 0 16rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    margin-right: 10rpx;
  }

  .icon-choose {
    width: 36rpx;
    height: 36rpx;
    text-align: right;
  }
  .all-choose {
    width: 36rpx;
    height: 36rpx;
  }
  .bottom-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 1;
    .all-choose-text {
      margin: 0 48rpx 0 16rpx;
    }
  }
</style>
